<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <STYLE>
        .contentDiv{
            display:inline-block;
            margin:5px 15px;
            width:100px;
            height:100px;
            border-radius:100px;
            -webkit-border-radius:100px;
            -moz-border-radius:100px;
            border:2px solid #fff;
            box-shadow:0 0 4px #ccc;
            overflow:hidden;
        }
        /*图片的样式*/
        .contentDiv img{
            width:100%;
            min-height:100%;
        }
    </STYLE>
</head>
<body>
<div class="panel admin-panel">
    <!--<div class="panel-head"><strong class="icon-reorder"> 个人信息</strong></div>-->
    <div class="padding border-bottom">
        <div style="margin: 0 50%" th:if="${i>=90}">
            <i class="layui-icon" style="font-size: 125px; color: #0ab2d2">&#xe679;</i>
            <h1 style="width: 125px" align="center" >低风险</h1>
        </div>
        <div style="margin: 0 50%" th:if="${i>60&&i<90}">
            <i class="layui-icon" style="font-size: 125px;color: #b35e14">&#xe679;</i>
            <h1 style="width: 125px" align="center" >中风险</h1>
        </div>
        <div style="margin: 0 50%" th:if="${i<=60}">
            <i class="layui-icon" style="font-size: 125px;color: red">&#xe679;</i>
            <h1 style="width: 125px" align="center" >高风险</h1>
        </div>
    </div>
    <div class="panel-head"><strong class="icon-reorder"> 账户信息</strong></div>
    <form id="form" class="layui-form layui-form-pane">
        <div id="update">
            <div class="layui-form-item ">
                <label class="layui-form-label" style="width: 10%">密 码</label>
                <label class="layui-form-label" style="width: 65%"></label>
                <label class="layui-form-label" style="width: 15%">存在风险，请修改密码</label>
                <label class="layui-form-label" style="width: 10%"><a id="updatePass">修改密码</a></label>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label" style="width: 10%">手 机</label>
                <label class="layui-form-label" style="width: 65%"></label>
                <label class="layui-form-label" style="width: 15%" th:if="${user.getUserIphone()!=null && user.getUserIphone()!=''}" th:text="${#strings.substring(user.getUserIphone(),0,3)+'****'+#strings.substring(user.getUserIphone(),7)}">13694547998</label>
                <label class="layui-form-label" style="width: 15%" th:if="${user.getUserIphone()==null || user.getUserIphone()==''}"></label>
                <label class="layui-form-label" style="width: 10%"><a id="updateIphone">修改手机</a></label>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label" style="width: 10%">邮 箱</label>
                <label class="layui-form-label" style="width: 65%"></label>
                <label class="layui-form-label" style="width: 15%" th:if="${user.getUserEmail()!=null && user.getUserEmail()!=''}" th:text="${#strings.substring(user.getUserEmail(),0,2)+'***'+#strings.substring(user.getUserEmail(),#strings.indexOf(user.getUserEmail(),'@'))}"></label>
                <label class="layui-form-label" style="width: 15%" th:if="${user.getUserEmail()==null || user.getUserEmail()==''}"></label>
                <label class="layui-form-label" style="width: 10%"><a id="updateEmail">修改邮箱</a></label>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label" style="width: 10%">账户注销</label>
                <label class="layui-form-label" style="width: 65%"></label>
                <label class="layui-form-label" style="width: 15%"></label>
                <label class="layui-form-label" style="width: 10%"><a id="out">立即注销</a></label>
            </div>
        </div>
    </form>
</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    layui.use('layer',function(){
        var layer=layui.layer;
        $("#updatePass").click(function () {
            editUserInfo("修改密码",1)
        });
        $("#updateIphone").click(function () {
            editUserInfo("修改电话",2)
        });
        $("#updateEmail").click(function () {
            editUserInfo("修改邮箱",3)
        });
        $("#out").click(function () {
            layer.confirm('您确定注销账户？', {
                btn: ['确定以及肯定','算了下次再说'] //按钮
            }, function(){
                /*连接后台注销 4*/
                $.ajax({
                    type: 'post',
                    url: '/user/updateUserInfoAll',
                    data: {"res": '4', "value": $("#email").val()},
                    dataType: "text",
                    async: false,
                    success: function (data) {
                        layer.msg('已注销，感谢您的使用', {icon: 1});
                    }
                });
            }, function(){
                layer.msg('感谢挽留', {icon: 1});
                /*layer.msg('也可以这样', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了']
                });*/
            });
        })
    });
    function editUserInfo(title,res){
        layer.open({
            type: 2,
            area: ['600px', '360px'],
            title:title,
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/user/editUserInfo/}]]+res
        });
    }
</script>
</html>